<template>
  <div class="content-box button-demo">
    <h2 class="demo-title">Tree 树组件</h2>
    <g-anchor>
      <g-anchor-link href="tree-simple" title="基础用法" />
      <g-anchor-link href="tree-check" title="可选择" />
      <g-anchor-link href="tree-defaultExpand" title="默认展开和选中" />
      <g-anchor-link href="tree-disabled" title="禁用状态" />
      <g-anchor-link href="tree-api" title="API" />
      <g-anchor-link href="tree-props" title="Props" />
      <g-anchor-link href="tree-methods" title="Methods" />
      <g-anchor-link href="tree-events" title="Events" />
    </g-anchor>

    <!-- 基础用法DEMO -->
    <g-block-box
      id="tree-simple"
      :title="'基础用法'"
      introduction="基础的树形结构展示。"
    >
      <template v-slot:demo>
        <g-tree :data="data" @node-click="handleNodeClick" />
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(code.simple) }}</code>
      </template>
    </g-block-box>

    <!-- 可选择 -->
    <g-block-box
      id="tree-check"
      :title="'可选择'"
      introduction="适用于需要选择层级时使用。"
    >
      <template v-slot:demo>
        <g-tree :data="data" ref="tree1" show-checkbox />
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(code.check) }}</code>
      </template>
    </g-block-box>

    <!-- 默认展开和默认选中 -->
    <g-block-box
      id="tree-defaultExpand"
      :title="'默认展开和默认选中'"
      introduction="可将 Tree 的某些节点设置为默认展开或默认选中"
    >
      <template v-slot:description>
        <p>
          分别通过default-expanded-keys和default-checked-keys设置默认展开和默认选中的节点。需要注意的是，此时必须设置node-key，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。
        </p>
      </template>
      <template v-slot:demo>
        <g-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1, 4]"
          :default-checked-keys="[4]"
          :filter-node-method="filterNode"
        />
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(code.expandAndCheck) }}</code>
      </template>
    </g-block-box>

    <!-- 禁用 -->
    <g-block-box
      id="tree-disabled"
      :title="'禁用'"
      introduction="可将 Tree 的某些节点设置为禁用状态"
    >
      <template v-slot:demo>
        <g-tree
          :data="data1"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1, 4]"
          :default-checked-keys="[4]"
        />
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(code.disabled) }}</code>
      </template>
    </g-block-box>

    <!-- 懒加载 -->
    <g-block-box id="tree-lazy" :title="'懒加载'">
      <template v-slot:demo>
        <g-tree show-checkbox lazy :load="loadNode" />
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(code.disabled) }}</code>
      </template>
    </g-block-box>

    <!-- 节点过滤 -->
    <g-block-box
      id="tree-filter"
      :title="'节点过滤'"
      introduction="通过关键字过滤树节点"
    >
      <template v-slot:demo>
        <div :style="{ marginBottom: '10px' }">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
          ></el-input>
        </div>
        <g-tree
          ref="tree"
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        />
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(code.filter) }}</code>
      </template>
    </g-block-box>

    <!-- API -->
    <div id="tree-api">
      <h3 class="demo-table-title">Attributes</h3>
      <g-table-simple :source="attributes" type="demo" />
    </div>

    <!-- Props -->
    <div id="tree-props">
      <h3 class="demo-table-title">props</h3>
      <g-table-simple :source="propsDes" type="demo" />
    </div>

    <!-- Methods -->
    <div id="tree-methods">
      <h3 class="demo-table-title">Methods</h3>
      <p>
        Tree 内部使用了 Node
        类型的对象来包装用户传入的数据，用来保存目前节点的状态。 Tree
        拥有如下方法：
      </p>
      <g-table-simple :source="methodsDesc" type="methods" />
    </div>

    <!-- Events -->
    <div id="tree-events">
      <h3 class="demo-table-title">Events</h3>
      <g-table-simple :source="eventDesc" type="event" />
    </div>
  </div>
</template>

<script>
const defaultScript = `
          <script>
            export default {
              data() {
                return {
                  data: [
                    {
                      id: 1,
                      label: '一级 1',
                      children: [
                        {
                          id: 4,
                          label: '二级 1-1',
                          children: [
                            {
                              id: 9,
                              label: '三级 1-1-1',
                            },
                            {
                              id: 10,
                              label: '三级 1-1-2',
                            },
                          ],
                        },
                      ],
                    },
                    {
                      id: 2,
                      label: '一级 2',
                      children: [
                        {
                          id: 5,
                          label: '二级 2-1',
                        },
                        {
                          id: 6,
                          label: '二级 2-2',
                        },
                      ],
                    },
                    {
                      id: 3,
                      label: '一级 3',
                      children: [
                        {
                          id: 7,
                          label: '二级 3-1',
                        },
                        {
                          id: 8,
                          label: '二级 3-2',
                        },
                      ],
                    },
                  ]
                }
              }
            }
          <\/script>
`
export default {
  data() {
    return {
      filterText: '',
      treeData: [],
      data: [
        {
          id: 1,
          label: '一级 1',
          name: 'jack',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
            {
              id: 5,
              label: '二级 1-2',
              children: [
                {
                  id: 11,
                  label: '三级 1-2-1',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
      data1: [
        {
          id: 1,
          label: '一级 1',
          name: 'jack',
          children: [
            {
              id: 4,
              label: '二级 1-1',
              disabled: true,
              children: [
                {
                  id: 9,
                  label: '三级 1-1-1',
                  disabled: true,
                },
                {
                  id: 10,
                  label: '三级 1-1-2',
                },
              ],
            },
            {
              id: 5,
              label: '二级 1-2',
              children: [
                {
                  id: 11,
                  label: '三级 1-2-1',
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: '一级 2',
          children: [
            {
              id: 5,
              label: '二级 2-1',
            },
            {
              id: 6,
              label: '二级 2-2',
            },
          ],
        },
        {
          id: 3,
          label: '一级 3',
          children: [
            {
              id: 7,
              label: '二级 3-1',
            },
            {
              id: 8,
              label: '二级 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      code: {
        simple: `
          <template>
            <g-tree :data="data" />
          </template>
          ${defaultScript}
        `,
        check: `
          <template>
            <g-tree :data="data" show-checkbox />
          </template>
          ${defaultScript}
        `,
        expandAndCheck: `
            <template>
              <g-tree 
                show-checkbox 
                node-key="id"
                :data="data"  
                :default-expanded-keys="[1, 2]"
                :default-checked-keys="[4]"/>
            </template>
            ${defaultScript}
        `,
        disabled: `
          <template>
            <g-tree 
              :data="data1" 
              show-checkbox
              node-key="id"
              :default-expanded-keys="[1, 4]"
              :default-checked-keys="[4]"
              />
          </template>
          <script>
            export default {
              data () {
                return {
                  data1: [
                    {
                      id: 1,
                      label: '一级 1',
                      name: 'jack',
                      children: [
                        {
                          id: 4,
                          label: '二级 1-1',
                          disabled: true,
                          children: [
                            {
                              id: 9,
                              label: '三级 1-1-1',
                              disabled: true
                            },
                            {
                              id: 10,
                              label: '三级 1-1-2',
                            },
                          ],
                        },
                        {
                          id: 5,
                          label: '二级 1-2',
                          children: [
                            {
                              id: 11,
                              label: '三级 1-2-1',
                            }
                          ],
                        },
                      ],
                    },
                    {
                      id: 2,
                      label: '一级 2',
                      children: [
                        {
                          id: 5,
                          label: '二级 2-1',
                        },
                        {
                          id: 6,
                          label: '二级 2-2',
                        },
                      ],
                    },
                    {
                      id: 3,
                      label: '一级 3',
                      children: [
                        {
                          id: 7,
                          label: '二级 3-1',
                        },
                        {
                          id: 8,
                          label: '二级 3-2',
                        },
                      ],
                    },
                  ],
                }
              }
            }
          <\/script>
        `,
        filter: `
          <template>
            <div :style="{marginBottom: '10px'}">
              <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText">
              </el-input>
            </div>
          
            <g-tree
              ref="tree"
              :data="data"
              show-checkbox
              default-expand-all
              node-key="id"
              :filter-node-method="filterNode"
            />
          </template>
          <script>
            export default {
              data() {
                return {
                  data: [
                    {
                      id: 1,
                      label: '一级 1',
                      children: [
                        {
                          id: 4,
                          label: '二级 1-1',
                          children: [
                            {
                              id: 9,
                              label: '三级 1-1-1',
                            },
                            {
                              id: 10,
                              label: '三级 1-1-2',
                            },
                          ],
                        },
                      ],
                    },
                    {
                      id: 2,
                      label: '一级 2',
                      children: [
                        {
                          id: 5,
                          label: '二级 2-1',
                        },
                        {
                          id: 6,
                          label: '二级 2-2',
                        },
                      ],
                    },
                    {
                      id: 3,
                      label: '一级 3',
                      children: [
                        {
                          id: 7,
                          label: '二级 3-1',
                        },
                        {
                          id: 8,
                          label: '二级 3-2',
                        },
                      ],
                    },
                  ]
                }
              }
            },
            watch: {
              filterText(val) {
                this.$refs.tree.filter(val);
              }
            },
            methods: {
              filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
              }
            }
          <\/script>
        `,
      },

      attributes: [
        {
          parameter: 'data',
          description: '展示数据',
          dataTypes: 'Array',
          optional: '',
          default: '',
        },
        {
          parameter: 'node-key',
          description: '每个树节点用来作为唯一标识的属性，整棵树应该是唯一的',
          dataTypes: 'String',
          optional: '',
          default: '',
        },
        {
          parameter: 'props',
          description: '配置选项，具体看下表',
          dataTypes: 'object',
          optional: '',
          default: '',
        },
        {
          parameter: 'show-checkbox',
          description: '节点是否可被选择',
          dataTypes: 'boolean',
          optional: '',
          default: 'false',
        },
        {
          parameter: 'default-expand-all',
          description: '是否默认展开所有节点',
          dataTypes: 'boolean',
          optional: '',
          default: 'false',
        },
        {
          parameter: 'default-expanded-keys',
          description: '默认展开的节点的 key 的数组',
          dataTypes: 'array',
          optional: '',
          default: '',
        },
        {
          parameter: 'default-checked-keys',
          description: '默认勾选的节点的 key 的数组',
          dataTypes: 'array',
          optional: '',
          default: '',
        },
        {
          parameter: 'filter-node-method',
          description:
            '对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏',
          dataTypes: 'Function(value, data, node)',
          optional: '',
          default: '',
        },
      ],
      propsDes: [
        {
          parameter: 'label',
          description: '指定节点标签为节点对象的某个属性值',
          dataTypes: 'string',
          optional: '',
          default: '',
        },
        {
          parameter: 'children',
          description: '指定子树为节点对象的某个属性值',
          dataTypes: 'string',
          optional: '',
          default: '',
        },
        {
          parameter: 'disabled',
          description: '指定节点选择框是否禁用为节点对象的某个属性值',
          dataTypes: 'boolean',
          optional: '',
          default: '',
        },
      ],
      methodsDesc: [
        {
          parameter: 'filter',
          description: '对树节点进行筛选操作',
          param:
            '接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数',
        },
        {
          parameter: 'getCheckedNodes',
          description:
            '若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点所组成的数组',
          param: '',
        },
      ],
      eventDesc: [
        {
          parameter: 'node-click',
          description: '节点被点击时的回调',
          param:
            '共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。',
        },
        {
          parameter: 'check',
          description: '当复选框被点击的时候触发',
          param:
            '共一个参数，依次为：传递给 data 属性的数组中该节点所对应的对象',
        },
        {
          parameter: 'check-change',
          description: '节点选中状态发生变化时的回调',
          param:
            '共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点',
        },
      ],
    }
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(data) {
      console.log(data)
    },
    loadNode(node, resolve) {
      if (node.level == 0) {
        setTimeout(() => {
          const data = [
            {
              label: '湖北省',
              id: '1',
              isLeaf: true,
            },
          ]
          resolve(data)
        }, 500)
      } else {
        setTimeout(() => {
          const data = [
            {
              label: '武汉市',
              id: '2',
              isLeaf: true,
              children: [
                {
                  label: '洪山区',
                  id: '3',
                  isLeaf: false
                },
              ]
            },
          ]
          resolve(data)
        }, 500)
      }
    },
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
}
</script>
